<template>
  <div class="image-list-component">
    <el-row>
      <el-col :span="20">
        <el-upload
          :action="action"
          :show-file-list="showFileList"
          :accept="accept"
          :multiple="true"
          :limit="limit"
          :on-exceed="onExceed"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="uploads">
          <el-button type="primary" icon="el-icon-upload">图片上传</el-button>
        </el-upload>
      </el-col>
      <el-col :span="2" >
        <el-button @click="handlePreview">预览</el-button>
      </el-col>
    </el-row>

    <el-row class="img-list-area m-t-20 tx-c" v-if="listArr.length">
      <el-row class="list-item" v-for="(item,index) in listArr" :key="index">
        <el-row v-if="item.viewType === 'image'">
          <el-col :span="4" class="image">
            <img :src="item.imageUrl" alt="">
          </el-col>
          <el-col :span="10" class="list-input">
            <el-input v-model.trim="item.href" placeholder="非必填，需要给图片添加链接时填写"></el-input>
          </el-col>
          <el-col :span="10">
            <el-row>
              <el-col :span="6">
                <span @click="moveUp(index)" v-show="index!==0">
                  <svg-icon icon-class="moveup" class="middle-size"/>
                </span>
                <span @click="moveDown(index)" v-show="index!==listArr.length-1">
                  <svg-icon icon-class="movedown" class="middle-size"/>
                </span>
              </el-col>
              <el-col :span="14">
                <el-button type="primary" size="mini" @click="deleteOne(index)">删除</el-button>
                <el-button type="primary" size="mini">添加商品</el-button>
              </el-col>
            </el-row>

          </el-col>
        </el-row>
        <el-row v-if="item.viewType === 'product'">
          <el-col :span="4" class="image">
            <img :src="item.imageUrl" alt="">
          </el-col>
          <el-col :span="10" class="list-input">
            {{item.title}}
          </el-col>
          <el-col :span="8" class="tx-c">
          <span @click="moveUp(index)">
            <svg-icon icon-class="moveup" class="middle-size"/>
          </span>
            <span @click="moveDown(index)">
            <svg-icon icon-class="movedown" class="middle-size"/>
          </span>
            <el-button type="primary" size="mini" @click="deleteOne(index)">删除</el-button>
          </el-col>
        </el-row>

      </el-row>
    </el-row>


    <el-dialog
      title="图片预览"
      :visible.sync="dialogVisible"
      width="50%"
      class="preview-dialog"
    >
      <div class="detail-wrap">
        <img v-for="item in listArr" :src="item.imageUrl" alt="">
      </div>
    </el-dialog>
  </div>
</template>

<!--图片上传组件-->
<script>
  import qnUpload from '@/utils/qiniu'
  import defaultGoodsImg from '@/assets/nopic.png'

  export default {
    name: 'ImgUpload',
    data() {
      return {
        dialogVisible: false,
        listArr: []
      }
    },
    watch: {
      detail: {
        handler(val) {
          this.listArr = val ? JSON.parse(val) : []
        },
        immediate: true
      },
      listArr: {
        handler(val) {
          this.emitData()
        },
      }
    },
    methods: {
      handlePreview() {
        this.dialogVisible = true
      },
      beforeAvatarUpload(file) {
        const _self = this
        const _URL = window.URL || window.webkitURL
        return new Promise((resolve, reject) => {
          let obj = {
            viewType: 'image',
            imageUrl: defaultGoodsImg,
            hasSuccess: false,
            href: '',
            uid: file.uid,
            w: this.width,
            h: this.height
          }
          _self.listArr.push(obj)

          const img = new Image()
          img.src = _URL.createObjectURL(file)
          img.onload = function () {
            const uid = file.uid
            for (let i = 0, len = _self.listArr.length; i < len; i++) {
              if (_self.listArr[i].uid === uid) {
                _self.listArr[i].w = this.width
                _self.listArr[i].h = this.height
                _self.$set(_self.listArr, i, _self.listArr[i]);
                return
              }
            }
          }
          resolve(true)
        })
      },
      emitData() {
        this.$emit('upload-callback', this.listArr)
      },
      handleSuccess(url, file) {
        let _self = this
        const uid = file.uid
        for (let i = 0, len = this.listArr.length; i < len; i++) {
          if (this.listArr[i].uid === uid) {
            this.listArr[i].imageUrl = url
            this.listArr[i].hasSuccess = true
            this.$set(this.listArr, i, this.listArr[i]);
            _self.emitData()
            return
          }
        }
      },
      uploads(file) {
        const upload = {
          mediaType:'image',
          value:file,
          uploadTo:this.uploadFrom,
          uploadType:'normal',
          callback:{
            success:this.handleSuccess,
          }
        }
        qnUpload.upload(upload)
      },
      moveUp(i) {
        if (i === 0) {
          this.$message.error('已经是第一个了')
          return false
        }
        let item = this.listArr[i - 1]
        this.$set(this.listArr, i - 1, this.listArr[i])
        this.$set(this.listArr, i, item)
        this.emitData()
      },
      moveDown(i) {
        if (i === this.listArr.length - 1) {
          this.$message.error('已经是最后一个了')
          return false
        }
        let item = this.listArr[i + 1]
        this.$set(this.listArr, i + 1, this.listArr[i])
        this.$set(this.listArr, i, item)
        this.emitData()
      },
      deleteOne(i) {
        this.listArr.splice(i, 1)
        this.emitData()
      }
    },
    props: {
      detail: String,
      imageUrl: String,
      action: {
        type: String,
        default: '11'
      },
      accept: {
        type: String,
        default: '.jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP,'
      },
      showFileList: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      limit: {
        type: Number,
        default: 200
      },
      onExceed: {
        type: Function,
        default: function (files, fileList) {
          this.$message.warning('已达到最大上传数量')
        }
      },
      handleAvatarSuccess: Function,
      upload: Function,
      uploadFrom: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
  .image-list-component {
    min-height: 100px;
  }

  .img-list-area {
    width: 90%;
    border-bottom: 1px solid #ddd;

    .list-item {
      border: 1px solid #ddd;
      border-bottom: none;
      padding: 5px;

      .image {
        img {
          width: 50px;
          height: 30px;
          vertical-align: middle;
        }
      }

    }
  }

  .preview-dialog {
    .detail-wrap {
      width: 90%;
      margin: 0 auto;
    }

    img {
      margin: 0;
      display: block;
      width: 100%;
      height: auto;
    }
  }
</style>
